<template>
  <Modal v-model="show"  title=""  :mask-closable="false" :footer-hide=true width="700px" :closable="true">
    <div style="width: 100%;height: 700px">
      <canvas style="width: 100%;height: 100%;background-color: #c80000; cursor: pointer" id="zoomedCanvas" @click="close"/>
    </div>
  </Modal>
</template>
<script>
export default {
  name: 'Device4gQrcodeLarge',
  data () {
    return {
      name: 'Device4gQrcodeLarge',
      show: false
    }
  },
  methods: {
    openDialog: function (canvas) {
      const scale = 2 // 放大倍数
      const originalWidth = canvas.width
      const originalHeight = canvas.height

      // 创建新的 canvas 用于显示放大后的二维码
      const zoomedCanvas = document.getElementById('zoomedCanvas')
      zoomedCanvas.width = originalWidth * scale
      zoomedCanvas.height = originalHeight * scale
      const zoomedCtx = zoomedCanvas.getContext('2d')

      /*      // 禁用抗锯齿，保持清晰
      zoomedCtx.imageSmoothingEnabled = false
      zoomedCtx.mozImageSmoothingEnabled = false
      zoomedCtx.webkitImageSmoothingEnabled = false
      zoomedCtx.msImageSmoothingEnabled = false */

      // 绘制放大后的二维码
      zoomedCtx.imageSmoothingEnabled = false // 禁用抗锯齿，保持清晰
      zoomedCtx.drawImage(canvas, 0, 0, originalWidth, originalHeight, 0, 0, zoomedCanvas.width, zoomedCanvas.height)

      // 替换原来的 canvas
      // canvas.replaceWith(zoomedCanvas)
      this.show = true
    },
    close () {
      this.show = false
    }
  }
}
</script>
